<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>二手手机回收｜旧手机回收｜二手手机交易－耶回收</title>
<meta name="keywords"
	content="耶回收二手手机回收频道-为您提供二手闲置手机回收、旧手机回收、闲置手机回收业务-权威机构检测，高价上门回收-耶回收官网！" />
<meta name="description" content="手机回收,旧手机回收,回收手机,高价回收手机" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="renderer" content="webkit" />
<link href="static/css/common_new.min.css" rel="Stylesheet"
	type="text/css" />

<link id="css" href="static/css/search.min.css" rel="stylesheet"
	type="text/css" />
<link rel="stylesheet"
	href="<%=basePath%>static/layer/2.4/skin/layer.css">


</head>

<script type="text/javascript" src="<%=basePath%>js/jquery.min.js"></script>
<script type="text/javascript"
	src="<%=basePath%>static/layer/2.4/layer.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.11.1.js"></script>

<link rel="stylesheet" href="<%=basePath%>static/css/computer.css">
<link rel="stylesheet"
	href="<%=basePath%>static/css/owl.carousel.min.css">
<script src="<%=basePath%>static/js/owl.carousel.js"></script>

<script rel="script" src="<%=basePath%>js/vue.min.js"></script>
<link rel="stylesheet"
	href="//at.alicdn.com/t/font_699355_5fafq7zsd2fq1tt9.css">
<link rel="stylesheet" href="<%=basePath%>css/index.css">

<body style="overflow: -Scroll; overflow-x: hidden">
	<!-- 顶部登录 -->
	<jsp:include page="yeah-top.jsp" />
	<!-- 顶部购物车 -->
	<jsp:include page="yeah_sellitem_shoppingtrolley.jsp" />
	
	<div class="daohang">
		<ul>
			<a href="sellindex"><li
				style="font-size: 15px; color: black">耶首页</li></a>
			<a href="sellitemnavigation?cid=1"><li class="${siqp.cid==1?"activec1":"activec2" }"
				style="font-size: 15px">手机</li></a>
			<a href="sellitemnavigation?cid=2"><li class="${siqp.cid==2?"activec1":"activec2" }"
				style="font-size: 15px">台式电脑</li></a>
			<a href="sellitemnavigation?cid=3"><li class="${siqp.cid==3?"activec1":"activec2" }"
				style="font-size: 15px">笔记本</li></a>
			<a href="sellitemnavigation?cid=4"><li class="${siqp.cid==4?"activec1":"activec2" }"
				style="font-size: 15px">平板电脑</li></a>
			<a href="sellitemnavigation?cid=5"><li class="${siqp.cid==5?"activec1":"activec2" }"
				style="font-size: 15px">电脑配件</li></a>
		</ul>
	</div>
	<style type="text/css">
	.activec1{
	color: #2e5ce4;
	}
	
	.activec2{
	color: black;
	}
	
	.sousuo h1{
	margin-top:20px;
	font-size: 32px;
	}
	</style>
	<div id="body" style="height: 1750px">

		<title>搜索页</title>

		<%-- <!--tips 面包屑-->
		<div class="product-list-crumbs-nav"
			style="margin: 0px 0px 20px 105px; padding-top: 40px">
			<div class="nav-box">
				<a href="sellindex" title="耶优品首页">首页</a>
				<c:if test="${siqp.cid==1 }">
					<a href="javascript:return false" style="cursor: default;">手机</a>
				</c:if>
				<c:if test="${siqp.cid==2 }">
					<a href="javascript:return false" style="cursor: default;">台式电脑</a>
				</c:if>
				<c:if test="${siqp.cid==3 }">
					<a href="javascript:return false" style="cursor: default;">笔记本</a>
				</c:if>
				<c:if test="${siqp.cid==4 }">
					<a href="javascript:return false" style="cursor: default;">平板电脑</a>
				</c:if>
				<c:if test="${siqp.cid==5 }">
					<a href="javascript:return false" style="cursor: default;">电脑配件</a>
				</c:if>
				<c:if test="${siqp.pid!=null }">
					<a href="javascript:return false" style="cursor: default;">${siqp.brandname }</a>
				</c:if>

			</div>
		</div> --%>

		<!--banner-->
		<!-- <div class="product-class-banner">
        <a href="/help/CommonQuestion.html" title="苹果手机回收" target="_blank">
            <img src="static/picture/cata_img_check.png" alt="苹果手机回收">
        </a>   

</div> -->

		<!--分类导航-->
		<div class="product-list-class-wrapper">
			<%-- <dl class="">
				<dt>分类：</dt>
				<div class="list-box-wrapper">
					<div class="list-box">
						<dd class="${siqp.cid==1?"active":"" }">
							<a href="sellitemnavigation?cid=1">手机</a>
						</dd>
						<dd class="${siqp.cid==2?"active":"" }">
							<a href="sellitemnavigation?cid=2">台式电脑</a>
						</dd>
						<dd class="${siqp.cid==3?"active":"" }">
							<a href="sellitemnavigation?cid=3">笔记本</a>
						</dd>
						<dd class="${siqp.cid==4?"active":"" }">
							<a href="sellitemnavigation?cid=4">平板电脑</a>
						</dd>
						<dd class="${siqp.cid==5?"active":"" }">
							<a href="sellitemnavigation?cid=5">配件</a>
						</dd>
					</div>
				</div>
				<div class="more">更多</div>
			</dl> --%>


			<dl class="" style="margin-top: 20px">
				<dt>品牌：</dt>
				<div class="list-box-wrapper">
					<div class="list-box">
						<c:forEach items="${map.brand }" var="b">
							<!--<dd class=""><a href="/shouji?all=True">全部</a></dd>                -->
							<dd class="${siqp.pid==b.pid?" active":"" }" id="d">
								<a href="sellitemnavigation?pid=${b.pid }&cid=${siqp.cid }"
									title="">${b.brandname }</a>
							</dd>
						</c:forEach>
					</div>
				</div>
				<div class="more">更多</div>
			</dl>

			<dl id="sort" class="">
				<dt>排序：</dt>
				<div class="list-box-wrapper">
					<div class="list-box">
						<dd class="${siqp.pricesort==null?(siqp.timesort==null?"active":""):""}">
							<a href="sellitemnavigation?cid=${siqp.cid }&pid=${siqp.pid }&title=${siqp.title }">默认</a>
						</dd>
						<div class="price">
							<dd class="${siqp.pricesort==null?"":"active" }">
								<a href="javascript:return false" style="cursor: default"> <c:if
										test="${siqp.pricesort==null }">价格</c:if> <c:if
										test="${siqp.pricesort==1 }">价格从低到高</c:if> <c:if
										test="${siqp.pricesort==2 }">价格从高到低</c:if>
								</a>
							</dd>
							<div class="pricesort">
								<div>
									<a
										href="sellitemnavigation?cid=${siqp.cid }&pid=${siqp.pid }&completemachine=${siqp.completemachine }&title=${siqp.title }&pricesort=1">价格从低到高</a>
								</div>
								<div>
									<a
										href="sellitemnavigation?cid=${siqp.cid }&pid=${siqp.pid }&completemachine=${siqp.completemachine }&title=${siqp.title }&pricesort=2">价格从高到低</a>
								</div>
							</div>
						</div>
						<dd class="${siqp.timesort==1?"active":"" }">
							<a
								href="sellitemnavigation?cid=${siqp.cid }&pid=${siqp.pid }&completemachine=${siqp.completemachine }&title=${siqp.title }&timesort=1">最新上架时间</a>
						</dd>
					</div>
				</div>
				<div class="more">更多</div>
			</dl>

		</div>
		
		<style type="text/css">
.pricesort {
	display: none;
}

.actives {
	display: block;
	position: absolute;
	z-index: 10;
	width: 100px;
	text-align: center;
	margin-top: 30px;
	margin-left: 22px;
	border: 1px solid #e6e6e6;
}
</style>
		<script type="text/javascript">
			$(function() {
				//    	var dlWidth =$(".product-list-class-wrapper").find("dl").eq(0).width();
				var dlWidth = 960;
				var s = $(".product-list-class-wrapper").find("dl").each(
						function() {
							var ddWidths = 0;
							$(this).find("dd").each(function() {
								//dd总宽度  
								ddWidths += $(this).width() + 30;

							});
							if (ddWidths > dlWidth) {
								$(this).addClass("show");
							}
						});
			});

			// 为class 为 more 的节点绑定 click 事件
			$('.more').click(function() {
				var a = $(this).parents("dl");
				//class的值
				var b = $(this).parents("dl").attr("class");
				if (b == "show") {
					a.removeClass("show");
					a.addClass("show active");
				} else {
					a.removeClass("show active");
					a.addClass("show");
				}
			});

			$(function() {
				//鼠标移入
				$(".price").on("mouseover", function() {
					$("#sort").css("height", "80px");
					$(".pricesort").addClass("actives");

					//鼠标移出
				}).on("mouseleave", function() {
					$(".pricesort").removeClass("actives");
					$("#sort").css("height", "34px");
				});
			})
		</script>
		
		
		<!--产品列表-->
		<div class="product-list-wrapper">
			<ul>
				<c:forEach items="${map.pageinfo.list }" var="p">
					<li><a href="sellitemparticulars?i_id=${p.i_id }" title="">
							<div class="img-box">
								<img src="${p.image }" style="width: 200px; height: 150px">
							</div>
							<p>${p.title }</p> <span>￥:${p.lowprice}</span>
							<div class="link">
								<em>马上购买</em><i class="arrow-right"></i>
							</div>
					</a></li>
				</c:forEach>
			</ul>
		</div>

		<div class="product-list-pager" style="margin-top: 100px">
			<input type="hidden" id="pages" value="${map.pageinfo.pages }" /> <a
				class="page active" href="javascript:return false;"
				style="font-weight: bold; cursor: default; background-color: #ccff66">共${map.pageinfo.pages }页</a>
			<a class="page active" href="javascript:return false;"
				style="font-weight: bold; cursor: default; background-color: #ccff66">第${map.pageinfo.pageNum }页</a>
			<c:choose>
				<c:when test="${map.pageinfo.pageNum==1||map.pageinfo.pageNum==0}">
					<a class="page active" href="javascript:return false;"
						style="font-weight: bold">上一页</a>
				</c:when>
				<c:otherwise>
					<a class="page active"
						href="sellitemnavigation?pageNum=${map.pageinfo.prePage}&cid=${siqp.cid }&pid=${siqp.pid }&completemachine=${siqp.completemachine }&title=${siqp.title }&pricesort=${siqp.pricesort }"
						style="font-weight: bold">上一页</a>
				</c:otherwise>
			</c:choose>
			<c:choose>
				<c:when test="${map.pageinfo.pageNum==map.pageinfo.pages}">
					<a class="page active" href="javascript:return false;"
						style="font-weight: bold">下一页</a>
				</c:when>
				<c:otherwise>
					<a class="page active"
						href="sellitemnavigation?pageNum=${map.pageinfo.nextPage}&cid=${siqp.cid }&pid=${siqp.pid }&completemachine=${siqp.completemachine }&title=${siqp.title }&pricesort=${siqp.pricesort }"
						style="font-weight: bold">下一页</a>
				</c:otherwise>
			</c:choose>
			<input type="text" name="" id="pagenum" placeholder="第...页"
				style="width: 50px; height: 20px" /> <a id="skip"
				class="page active" href=""
				style="font-weight: bold; background-color: #ccff66"
				onclick="return skip()">跳转</a>
		</div>

		<div class="product-list-swiper-page-list swiper-pagination"></div>
		
		
		<script type="text/javascript">
			/* 当前页跳转 */
			function skip() {
				var pagenum = $("#pagenum").val().trim();
				var pages = document.getElementById("pages").value;
				if (pagenum.length == 0) {
					layer.msg("输入页数不能为空或空格!", {
						icon : 2,
						time : 2000
					});
					return false;
				} else {
					var reg = /^[-+]?\d*$/;
					if (reg.test(pagenum)) {
						if (parseInt(pagenum) < 1
								|| parseInt(pagenum) > parseInt(pages)) {
							layer.msg("请输入正确的页数!", {
								icon : 2,
								time : 2000
							});
							return false;
						} else {
							$("#skip")
									.attr(
											"href",
											'sellitemnavigation?cid=${siqp.cid }&pid=${siqp.pid }&completemachine=${siqp.completemachine }&title=${siqp.title }&pricesort=${siqp.pricesort }&pageNum='
													+ pagenum);
							return true;
						}
					} else {
						layer.msg("请输入数字!", {
							icon : 2,
							time : 2000
						});
						return false;
					}
				}
			};
			
			
			/* 搜索机型 */ 
			function search(){
				var title=$("#search").val().trim();
				if(title.length==0){
					return false;
				}
				$("#asearch").attr("href","sellitemnavigation?title="+title);
				return true; 
			}
		</script>
	</div>

	
	<!-- 底部 -->
		<jsp:include page="bottom.jsp" />

</body>
</html>